{#
 This Source Code Form is subject to the terms of the Mozilla Public
 License, v. 2.0. If a copy of the MPL was not distributed with this
 file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

{% from "newsletter/includes/macros.html" import email_form_thankyou with context %}

{% if not success %}
  <form id="newsletter-form" class="mzp-c-newsletter-form" action="{{ action }}" method="post" data-testid="newsletter-form">
    {% if not is_multi_newsletter_form %}
      <div hidden>
        {{ form.newsletters|safe }}
      </div>
    {% endif %}
    <input type="hidden" name="source_url" value="{{ request.build_absolute_uri() }}">

    {% if include_title and is_multi_newsletter_form %}
    <header class="mzp-c-newsletter-header">
      <h3 class="mzp-c-newsletter-title">{{ title|d(ftl('multi-newsletter-form-title'), true) }}</h3>
      <p class="mzp-c-newsletter-desc">{{ desc|d(ftl('multi-newsletter-form-desc'), true) }}</p>
    </header>
    {% elif include_title %}
    <header class="mzp-c-newsletter-header">
      <h3 class="mzp-c-newsletter-title">{{ title|d(ftl('newsletter-form-get-firefox-news'), true) }}</h3>
      {% if subtitle %}
      <h4 class="mzp-c-newsletter-subtitle">{{ subtitle }}</h4>
      {% endif %}
      {% if desc %}
      <p class="mzp-c-newsletter-desc">{{ desc }}</p>
      {% endif %}
    </header>
    {% endif %}

    <fieldset class="mzp-c-newsletter-content">
      <div class="mzp-c-form-errors {% if not form.errors %}hidden{% endif %}" id="newsletter-errors" data-testid="newsletter-error-message">
        {{ form.non_field_errors()|safe }}
        <ul class="mzp-u-list-styled">
          <li class="error-email-invalid {% if not form.email.errors %}hidden{% endif %}">
            {{ ftl('newsletter-form-please-enter-a-valid') }}
          </li>
          <li class="error-select-country {% if not form.country.errors %}hidden{% endif %}">
            {{ ftl('newsletter-form-please-select-country') }}
          </li>
          <li class="error-select-language {% if not form.lang.errors %}hidden{% endif %}">
            {{ ftl('newsletter-form-please-select-language') }}
          </li>
          <li class="error-newsletter-checkbox {% if not form.newsletters.errors %}hidden{% endif %}">
            {{ ftl('multi-newsletter-form-checkboxes-error') }}
          </li>
          <li class="error-privacy-policy {% if not form.privacy.errors %}hidden{% endif %}">
            {{ ftl('newsletter-form-you-must-agree-to') }}
          </li>
          <li class="error-try-again-later hidden">
            {{ ftl('newsletter-form-we-are-sorry-but-there') }}
          </li>
        </ul>
      </div>

      {{ form.email.label_tag(ftl('newsletter-form-your-email-address') if not email_label else email_label) }}
      {% if email_placeholder %}
        {% set placeholder = email_placeholder %}
      {% else %}
        {% set placeholder = ftl('newsletter-form-yournameexamplecom', fallback='newsletter-form-your-email-here') %}
      {% endif %}
      {{ field_with_attrs(form.email, placeholder=placeholder, class='mzp-js-email-field')|safe }}

      <div id="newsletter-details" class="mzp-c-newsletter-details">
        <div class="mzp-c-newsletter-details-inner">
        {% if include_country %}
          {{ form.country.label_tag() }}
          <p>{{ form.country|safe }}</p>
        {% endif %}

        {% if include_language %}
          {{ form.lang.label_tag() }}
          <p>{{ form.lang|safe }}</p>
        {% else %}
          <input type="hidden" name="lang" id="id_lang"  value="en">
        {% endif %}

        {% if is_multi_newsletter_form %}
          <fieldset class="mzp-u-inline">
            <legend>{{ ftl('multi-newsletter-form-checkboxes-legend') }}</legend>
            <p>
              {% for field in form.newsletters %}
                <label for="{{ field.id_for_label }}" class="mzp-u-inline">
                  {{ field.tag() }} {{ field.choice_label }}
                </label>
              {% endfor %}
            </p>
          </fieldset>
        {% endif %}

        <p>
          <label for="privacy" class="mzp-u-inline">
            <input type="checkbox" id="privacy" name="privacy" required aria-required="true" data-testid="newsletter-privacy-checkbox"> {{ ftl('newsletter-form-im-okay-with-mozilla', url=url('privacy.notices.websites')) }}
          </label>
        </p>
        </div>
      </div>

      <p class="mzp-c-form-submit">
        <button type="submit" id="newsletter-submit" class="mzp-c-button {{ button_class }}" data-cta-text="Newsletter Sign Up" data-testid="newsletter-submit-button">
          <span class="submit-text">
          {% if submit_text %}
            {{ submit_text }}
          {% else %}
            {{ ftl('newsletter-form-sign-up-now', fallback='newsletter-form-sign-me-up') }}
          {% endif %}
          </span>
          <svg class="submit-loading" hidden fill="currentColor" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <title>{{ ftl('newsletter-form-submit-sending') }}</title>
            <style>.s1{animation:s .8s linear infinite;animation-delay:-.8s}.s2{animation-delay:-.65s}.s3{animation-delay:-.5s}@keyframes s{93.75%,100%{opacity:.2}}</style>
            <circle class="s1" cx="4" cy="12" r="3"/>
            <circle class="s1 s2" cx="12" cy="12" r="3"/>
            <circle class="s1 s3" cx="20" cy="12" r="3"/>
          </svg>
        </button>

        {% if details %}
          <span class="mzp-c-fieldnote">{{ details }}</span>
        <!-- we could make this more configuration-driven by adding an extra param to the email_newsletter_form helper -->
        <!-- complex condition used due to time constraint -->
        {% elif not is_multi_newsletter_form and not id =='ten-tabs' %}
            <span class="mzp-c-fieldnote">
              {# Issue 7460 `mozilla-and-you` is the ID for the Firefox newsletter, because history... #}
              {% if id == 'mozilla-and-you' %}
                {{ ftl('newsletter-form-we-will-only-send-firefox-v2') }}
              {% else %}
                {{ ftl('newsletter-form-we-will-only-send-v2') }}
              {% endif %}
            </span>
        {% endif %}
      </p>
    </fieldset>
  </form>

  <div id="newsletter-thanks" class="mzp-c-newsletter-thanks hidden" data-testid="newsletter-thanks-message">
    {% if thankyou_content %}
      <h3>{{ thankyou_head }}</h3>
      <p>{{ thankyou_content }}</p>
    {% else %}
      {{ email_form_thankyou() }}
    {% endif %}
  </div>

{% elif use_thankyou %}
  <div id="newsletter-thanks">
    {% if thankyou_content %}
      <h3>{{ thankyou_head }}</h3>
      <p>{{ thankyou_content }}</p>
    {% else %}
      {{ email_form_thankyou() }}
    {% endif %}
  </div>
{% endif %}
